<template>
  <div class="all">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      <span>我的订单</span>
    </div>
    <div class="nav">
      <ul>
        <li>全部</li>
        <li>待付款</li>
        <li>待收货</li>
        <li>待评价</li>
      </ul>
    </div>
    <div class="tbody">
      <div class="list">
        <span>万人迷女装 ></span>
        <span class="deng">等待付款</span>
      </div>
      <ul>
        <li>
          <img src="../../assets/images/detail/1.png" alt="" />
        </li>
        <li>
          <p>韩版显瘦条纹短袖休闲套装女家居服两件套学生跑步短裤运动服夏季</p>
          <p>描述信息</p>
          <span>￥72.3</span>
          <span class="del"> <del>￥99.8</del> </span>
          <i>x1</i>

          <div class="btn">
            <span class="green">取消订单</span>
            <span class="red">支付订单</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="tbody">
      <div class="list">
        <span>万人迷女装 ></span>
        <span class="deng">等待付款</span>
      </div>
      <ul>
        <li>
          <img src="https://s5.mogucdn.com/mlcdn/c45406/200425_5j3cgld1hkk334a9a9ed238cf7717_3999x5999.jpg_100x100.jpg"
            alt="" />
        </li>
        <li>
          <p>夏季新款裤子百搭开衫防晒衣抽绳吊带背心阔腿裤三件套套装女</p>
          <p>描述信息</p>
          <span>￥109</span>
          <span class="del"> <del>￥200</del> </span>
          <i>x1</i>

          <div class="btn">
            <span class="green">取消订单</span>
            <span class="red">支付订单</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="tbody">
      <div class="list">
        <span>万人迷女装 ></span>
        <span class="deng">等待付款</span>
      </div>
      <ul>
        <li>
          <img src="https://s5.mogucdn.com/mlcdn/c45406/190109_6e3e26kh48cd0dk60d2af0j532fb0_640x961.jpg_100x100.jpg"
            alt="" />
        </li>
        <li>
          <p>2020春季ins帆布鞋女新款百搭帆布鞋学生韩版网红春款板鞋</p>
          <p>描述信息</p>
          <span>￥72.3</span>
          <span class="del"> <del>￥99.8</del> </span>
          <i>x1</i>

          <div class="btn">
            <span class="green">取消订单</span>
            <span class="red">支付订单</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="tbody">
      <div class="list">
        <span>万人迷女装 ></span>
        <span class="deng">等待付款</span>
      </div>
      <ul>
        <li>
          <img src="https://s11.mogucdn.com/mlcdn/c45406/190316_059b83kliklj8hh19lbkkd8dgdii4_640x960.jpg_100x100.jpg"
            alt="" />
        </li>
        <li>
          <p>2020小个子时尚套装夏季中长款短袖T恤连衣裙气质两件套短裙</p>
          <p>描述信息</p>
          <span>￥72.3</span>
          <span class="del"> <del>￥99.8</del> </span>
          <i>x1</i>

          <div class="btn">
            <span class="green">取消订单</span>
            <span class="red">支付订单</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>
 
<style lang = "less" scoped>
.all {
  height: 6vh;
  line-height: 6vh;
  background-color: #f7f8fa;
  .header {
    text-align: center;
    /* margin-bottom: 30px; */
    border-bottom: 1px solid #ccc;
    i {
      float: left;
      margin-left: 10px;
    }
  }
  .nav {
    ul {
      display: flex;
      justify-content: space-evenly;
      li {
        &:hover {
          border-bottom: 2px solid red;
        }
      }
    }
  }
}
.tbody {
  width: 90%;
  height: 180px;
  margin: 10px auto;
  background-color: #f7f7f7;
  border-radius: 10px;
  font-size: 14px;
  .list {
    display: flex;
    justify-content: space-between;
    text-indent: 1em;
    .deng {
      color: red;
      margin-right: 5px;
    }
  }
  ul {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    li {
      height: 100px;
      background-color: #fff;
      font-size: 12px;
      color: #ccc;
      p {
        margin-left: 5px;
        line-height: 18px;
        color: #444;
      }
      span {
        color: #666;
        font-size: 14px;
      }
      .del {
        color: #ccc;
        font-size: 12px;
      }
      i {
        float: right;
      }
      .btn {
        margin-top: 5px;
        float: right;

        .green {
          background-color: rgb(0, 145, 0);
          border-radius: 20px;
          padding: 3px 5px;
          color: #fff;
        }
        .red {
          background-color: rgb(255, 41, 41);
          border-radius: 20px;
          padding: 3px 5px;
          margin-left: 12px;
          color: #fff;
        }
      }
    }
  }
}
</style>